// childCom1.vue
<template class="border">
	<div>
		<p>foo: {{ foo }}</p>
		<p>coo: {{coo }}</p>
		<p>name: {{name }}</p>
		<p>childCom1的$attrs: {{ $attrs }}</p>
		<p>childCom1的$listeners: {{ $listeners}}</p>
		<child-com2 v-bind="$attrs"></child-com2>
		<buttom @click="emitClick" style="background-color: red;">改变</buttom>
	</div>
</template>
<script>
	const childCom2 = () => import("./childCom2.vue");
	export default {
		inject: ['name'],
		components: {
			childCom2
		},
		inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
		props: ["foo", "coo"],
		data(){
			return{
				res:this.foo
			}
		},
		created() {
			console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
		},
		methods: {
			emitClick() {
				this.res = '改不了'
				this.$emit('callFather', this.foo)
			}
		}
	};
</script>
